<template>
  <div class="app-container calendar-list-container">

    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" v-waves type="primary" v-roles="'editRole'" icon="el-icon-edit">添加权限路由</el-button>
    </div>

    <!-- // 这是列表 -->
    <tree-table :data="listData" :expandAll="true"  v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row stripe>
      <el-table-column align="center" label="路由名称" width="130">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="Class-类名" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.class}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Action-方法" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.action}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="Router-名称" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.route}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" width="130">
        <template slot-scope="scope">
          <span>{{scope.row.mark}}</span>
        </template>
      </el-table-column>
       <!-- //这里是操作   -->
      <el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handlDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>

    <!-- 弹框添加-->
    <edit-system-menu :visible.sync="editVisible" :propsData="propsData" :propsListData="listData" @refresh='isrefresh'></edit-system-menu>  
    <!-- 弹框添加  end -->
  
    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>

</template>


<script>

import editSystemMenu from '../dashboard/editSystemMenu'
import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API
import waves from '@/directive/waves' // 水波纹指令
import treeTable from '@/components/TreeTable'
// import { mapGetters } from 'vuex'

export default {
  name: 'systemMenu',

  directives: {
    waves
  },

  components: { BackToTop, treeTable, editSystemMenu },

  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'z-index': '9999',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },

      listLoading: false,
      listData: [],
      // 编辑传值
      editVisible: false,
      propsData: {}
    }
  },

  created() {
    this.fetchTreeData()
  },

  methods: {

    // 添加
    handleCreate() {
      this.propsData = {} // 避免报错
      this.editVisible = !this.editVisible
    },

    // 编辑
    handleUpdate(row) {
      this.editVisible = !this.editVisible
      this.propsData = row
    },

    // 删除
    handlDel(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {
          id: row.id
        }
        api.delPermissionApi(params).then(response => {
          if (response.data.code === 0) {
            const index = this.listData.indexOf(row)
            this.listData.splice(index, 1)
            this.$root.message('已移菜单', 'success')
          }
        })
      }).catch(() => {
        this.$root.message('已取消删除', 'info')
      })
    },

    // 获取树状图数据
    fetchTreeData() {
      return new Promise((resolve, reject) => {
        api.permissionTreeApi(this.search).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
          }
        })
      })
    },

    // 子窗口关闭,刷新数据
    isrefresh(data) {
      this.fetchTreeData()
    }

  }
}

</script>
